<template>
  <div class="common-statistics">
    <stats-card
        title="景点总数" color="#CA6C65" unit="个" icon="iconfont icon-caipu"
        :value="travelStore.travelStats.spotCount" />

    <stats-card
        title="旅行城市" color="#6FBB69" unit="个" icon="iconfont icon-leibie"
        :value="travelStore.travelStats.cityCount" />

    <stats-card
        title="旅行次数" color="#E4BF62" unit="次" icon="iconfont icon-cishu"
        :value="travelStore.travelStats.recordCount" />

    <stats-card
        title="平均次数" color="#5470C6" unit="次/月" icon="iconfont icon-pinlv"
        :value="1" />
  </div>
</template>

<script setup lang="ts">
import StatsCard from '@/components/StatsCard.vue'
import { useTravelStore } from '@/store/travel.ts'

const travelStore = useTravelStore()
</script>
